<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝购物车</title>
    <link rel="stylesheet" href="./reset - 副本.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-image: url('./电脑.png');
            background-size: cover;
        }

        nav {
            background-color: #f66029;
            color: #ffffff;
            padding: 15px 0;
            text-align: center;
        }

        .main-content {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }

        .product-list {
            margin-top: 20px;
        }

        .product-item {
            border-bottom: 1px solid #ddd;
            padding: 10px 0;
            display: flex;
            align-items: center;
        }

        .product-item img {
            width: 130px;
            height: 100px;
            margin-right: 20px;
        }

        .product-info {
            flex-grow: 1;
        }

        .product-info h3 {
            margin: 0;
            font-size: 17px;
        }

        .product-info p {
            margin: 5px 0;
        }

        .product-actions {
            display: flex;
            align-items: center;
        }

        .product-actions button {
            margin-right: 10px;
            padding: 5px 10px;
            background-color: #fa652f;
            color: #ffffff;
            border: none;
            cursor: pointer;
        }

        .total-price {
            margin-top: 20px;
            text-align: right;
            color: #fc6c37;
            font-weight: bold;
        }

        .checkout {
            margin-top: 20px;
            text-align: right;
        }

        .btn-checkout {
            padding: 10px 20px;
            background-color: #fb713e;
            color: #ffffff;
            border: none;
            cursor: pointer;
        }

         /* 颜色样式 */
        .price {
            color: #fc7746;
            font-weight: bold;
        }

        .quantity {
            color: #5ea9f9;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <nav>
        <h1>您的购物车</h1>
    </nav>
    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 全选复选框 -->
        <input type="checkbox" id="check-all"> 全选
        <!-- 新增商品表单 -->
        <form id="add-product-form">
            <label for="product-name">商品名称:</label>
            <input type="text" id="product-name" required>
            <label for="product-price">价格:</label>
            <input type="number" id="product-price" required>
            <label for="product-quantity">数量:</label>
            <input type="number" id="product-quantity" required>
            <button type="submit">添加商品</button>
        </form>
        <!-- 商品列表 -->
        <div class="product-list">
            <!-- 商品 -->
        </div>
        <!-- 总金额 -->
        <div class="total-price">
            总金额：<span id="total-price">￥0</span>
        </div>
        <!-- 结算按钮 -->
        <div class="checkout">
            <button class="btn-checkout">去结算</button>
        </div>
    </div>
    <script src="./layui.js"></script>
    <script>
        window.onload = function () {
            //商品数据
            var products = [
                {
                    imgUrl: "https://imgservice.suning.cn/uimg1/b2c/image/_1e-NTRUrmErfQufWhi0Ng.png_800w_800h_4e",
                    name: "欧莱雅复颜水乳套装",
                    price: 648,
                    quantity: 1
                },
                {
                    imgUrl: "https://th.bing.com/th/id/R.3cca0dd6632c487fd0caf6c6aa11749a?rik=LQ65e%2bfJFZHURA&riu=http%3a%2f%2fwww.szquanli.com.cn%2fuploads%2fallimg%2f160906%2f2-160Z6103A7.jpg&ehk=OHHJm%2f4aCvERU%2bhXMyG%2bhIxX9DWv3OKLl6T8iNlKxQM%3d&risl=&pid=ImgRaw&r=0",
                    name: "汤臣倍健蛋白质乳粉",
                    price: 199.9,
                    quantity: 1
                },
                {
                    imgUrl: "https://th.bing.com/th/id/OIP.51ONI-Uc12zD8wRIEkDCAwHaHa?rs=1&pid=ImgDetMain",
                    name: "8090后怀旧零食大礼包",
                    price: 9.9,
                    quantity: 1
                },
                {
                    imgUrl: "https://th.bing.com/th/id/OIP.l9waHCSssiAOa7D-XH-IpwHaGv?rs=1&pid=ImgDetMain",
                    name: "钢铁侠抖音同款",
                    price: 24.8,
                    quantity: 1
                },
            ];
            var productContainer = document.querySelector('.product-list');
            var checkAllCheckbox = document.querySelector("#check-all");
            var checkoutButton = document.querySelector(".btn-checkout");
            var totalPriceElement = document.getElementById("total-price");
            var addProductForm = document.getElementById("add-product-form");
            function renderProducts() {
                productContainer.innerHTML = '';
                products.forEach(function (product) {
                    var productItem = document.createElement('div');
                    productItem.classList.add('product-item');
                    productItem.innerHTML = `
                <input type="checkbox" class="check-item">
                <img src="${product.imgUrl}" alt="${product.name}">
                <div class="product-info">
                    <h3>${product.name}</h3>
                    <p>价格：<span class="price">￥${product.price}</span></p>
                    <p>数量：<span class="quantity">${product.quantity}</span></p>
                </div>
                <div class="product-actions">
                    <button class="btn-increase">+</button>
                    <button class="btn-decrease">-</button>
                    <button class="btn-remove">删除</button>
                </div>
            `;
                    productContainer.appendChild(productItem);
                });
            }
            renderProducts();
            function updateTotalPrice() {
                var totalPrice = 0;
                var checkItems = document.querySelectorAll(".check-item:checked");
                checkItems.forEach(function (item) {
                    var productItem = item.closest('.product-item');
                    var price = parseFloat(productItem.querySelector(".price").textContent.slice(1));
                    var quantity = parseInt(productItem.querySelector(".quantity").textContent);
                    totalPrice += price * quantity;
                });
                totalPriceElement.textContent = "￥" + totalPrice.toFixed(2);
            }
            checkAllCheckbox.addEventListener("change", function () {
                var checkItems = document.querySelectorAll(".check-item");
                checkItems.forEach(function (item) {
                    item.checked = this.checked;
                }, this);
                updateTotalPrice();
            });
            productContainer.addEventListener("change", function (event) {
                if (event.target.classList.contains('check-item')) {
                    updateTotalPrice();
                }
            });
            checkoutButton.addEventListener("click", function () {
                var totalPrice = parseFloat(totalPriceElement.textContent.slice(1));
                alert("总金额为：￥" + totalPrice.toFixed(2));
            });
            productContainer.addEventListener('click', function (event) {
                if (event.target.classList.contains('btn-increase')) {
                    var quantityElement = event.target.closest('.product-item').querySelector('.quantity');
                    var quantity = parseInt(quantityElement.textContent);
                    quantity++;
                    quantityElement.textContent = quantity;
                    updateTotalPrice();
                }
            });
            productContainer.addEventListener('click', function (event) {
                if (event.target.classList.contains('btn-decrease')) {
                    var quantityElement = event.target.closest('.product-item').querySelector('.quantity');
                    var quantity = parseInt(quantityElement.textContent);
                    if (quantity > 1) {
                        quantity--;
                        quantityElement.textContent = quantity;
                        updateTotalPrice();
                    }
                }
            });
            productContainer.addEventListener('click', function (event) {
                if (event.target.classList.contains('btn-remove')) {
                    var productItem = event.target.closest('.product-item');
                    productItem.remove();
                    updateTotalPrice();
                }
            });
            addProductForm.addEventListener("submit", function (event) {
                event.preventDefault();
                var productName = document.getElementById("product-name").value;
                var productPrice = parseFloat(document.getElementById("product-price").value);
                var productQuantity = parseInt(document.getElementById("product-quantity").value);

                if (!productName || !productPrice || !productQuantity || productPrice <= 0 || productQuantity <= 0) {
                    alert("请输入有效的商品信息！");
                    return;
                }
                var newProduct = {
                    imgUrl: "https://via.placeholder.com/150",
                    name: productName,
                    price: productPrice,
                    quantity: productQuantity
                };
                products.push(newProduct);
                renderProducts();
                updateTotalPrice();
                addProductForm.reset();
            });
        };
    </script>
</body>

</html>